<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
	<!-- vue ajax -->
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

	<title>店铺列表</title>
	<style>
	</style>
</head>

<body>
	<div id="app">
		<!-- 头部导航 -->
		<van-nav-bar title="店铺列表"></van-nav-bar>
		<van-row style="text-align: center">
			<van-col span="8">你好，{{ username }}</van-col>
			<van-col span="8" offset="8">
				<van-button @click="toAddShop">添加店铺</van-button>
			</van-col>
		</van-row>
		<van-row style="text-align: center">
			<van-col span="8">店铺名称</van-col>
			<van-col span="8">状态</van-col>
			<van-col span="8">操作</van-col>
		</van-row>
		<van-divider></van-divider>
		<van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad">
			<van-cell v-for="item in state.list" :key="item.shopId">
				<van-row style="text-align: center">
					<van-col span="8">{{ item.shopName }}</van-col>
					<van-col span="8">{{ showStatu(item.enableStatus) }}</van-col>
					<van-col span="8" v-html="operation(item.enableStatus)"
						@click="toManageShop(item.enableStatus,item.shopId)"></van-col>
				</van-row>
			</van-cell>
		</van-list>

	</div>
</body>

<script>
	Vue.use(vant.List);

	let pageNum = 1;
	let pageSize = 15;

	new Vue({
		el: '#app',
		data: {
			username: 'test',
			state: {
				list: [],
				loading: false,
				finished: false,
			},
		},
		methods: {
			// 跳转到店铺添加页面
			toAddShop: function () {
				window.location.href = "/o2o/shopadmin/addshop";
			},
			// 跳转转到店铺管理页面
			toManageShop(statuCode, id) {
				if (statuCode === 1) {
					//window.location.href = "/o2o/shopadmin/editshop?shopId=" + id;
					window.location.href = "/o2o/shopadmin/manageshop?shopId=" + id;
				}
			},
			// 显示店铺状态 
			showStatu(statuCode) {
				if (statuCode == -1)
					return '不可用';
				if (statuCode == 0)
					return '审核中';
				if (statuCode == 1)
					return '可用';
			},
			// 显示操作按钮
			operation(statu, id) {
				if (statu === 1)
					return `<van-button>进入</van-button>`;
			},
			// 获取店铺列表
			onLoad() {	

				axios.get('/o2o/shopadmin/shoplist', {
					params: {
						pageNum: pageNum,
						pageSize: pageSize,
					},
				}).then(res => {

					if (res.status == 200) {
						console.log(res.data.data)
						let data = res.data.data;
						data.shopList.forEach(item => {
							this.state.list.push(item);
						});
					}

					// 加载状态结束
					this.state.loading = false;

					// 数据全部加载完成
					if (this.state.list.length >= res.data.data.count) {
						this.state.finished = true;
					} else {
						pageNum += 1;
					}
				})



				/* 
				金大婶编写
				const data = new Promise((resolve, reject) => {
								axios.get('/o2o/shopadmin/shoplist').then(res => {
									this.state.loading = true
									if (res.status === 200) {
										this.state.loading = false
										dataSize = res.data.data.count
										const { shopList } = res.data.data  // 渲染的数据
										resolve(shopList)
									} else {
										alert('服务器错误，请联系管理员')
									}
								})
							})
							this.state.list.push(...await data) 
							if(this.state.list.length>=dataSize){
								this.state.finished = true
							} */
			}

		}
	})
</script>

</html>